<script setup>
import { ref } from "vue";
import {useRouter } from 'vue-router';

const router = useRouter();

// 模拟数据获取
const content = ref('');
const fetchData = () => {
  setTimeout(() => {
    content.value = '系统响应正常';
  }, 1000);
}
fetchData();

// 卡片配置
const cards = [
  { path: 'station', title: '车站管理', description: '查看和管理车站信息' },
  { path: 'train', title: '车次管理', description: '查看和管理车次信息' },
  { path: 'train-station', title: '火车车站管理', description: '查看和管理火车车站信息' },
  { path: 'train-carriage', title: '火车车厢管理', description: '查看和管理火车车厢信息' },
  { path: 'train-seat', title: '车厢座位管理', description: '查看和管理车厢座位信息' },
  { path: 'job', title: '定时任务管理', description: '查看和管理定时任务' }
];
</script>

<template>
  <div class="dashboard-container">
    <header class="dashboard-header">
      <h1>CR —— China Railway</h1>
      <p>中国铁路旅客服务系统</p>
      <div class="status-indicator">
        <span>系统状态：</span>
        <span class="status-text" :class="{ 'status-success': content === '系统响应正常' }">{{ content }}</span>
      </div>
    </header>

    <div class="dashboard-content">
      <div class="card-container">
        <div
          class="card"
          v-for="card in cards"
          :key="card.title"
          @click="router.push({ path: card.path })"
        >
          <div class="card-content">
            <div class="card-text">
              <h3>{{ card.title }}</h3>
              <p>{{ card.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
  min-height: 100vh;
  font-family: 'Microsoft YaHei', sans-serif;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  width: 100%;
  max-width: 1200px;
}

.dashboard-header h1 {
  margin: 0;
  font-size: 28px;
  color: #0066cc;
}

.dashboard-header p {
  margin: 5px 0 15px;
  color: #666;
  font-size: 16px;
}

.status-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.status-text {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 5px;
}

.status-success {
  background-color: #e6f7e6;
  color: #28a745;
}

.dashboard-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  gap: 20px;
}

.card {
  width: 32%;
  min-width: 250px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card-content {
  display: flex;
  align-items: center;
}

.card-text {
  flex: 1;
}

.card-text h3 {
  margin: 0 0 10px;
  color: #0066cc;
  font-size: 18px;
}

.card-text p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

@media (max-width: 992px) {
  .card-container {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>
